import AlertFill from "@/assets/image/icons/alert-fill.svg";
import { Card, Descriptions, Space, Tag } from "antd";
import { useState } from "react";
import { history } from "umi";
import "./index.less";
import { PaddingContent } from "@/components/page-padding";
import CustomModal from "@/components/customModal";
import Info from "@/assets/image/icons/info.svg";
import AlertCircle from "@/assets/image/icons/alert-circle.svg";
import CustomAlert from "@/components/customAlert";
import styled from "styled-components";
import BookingRecord from "@/components/booking-record";
import userStore from "@/store/userStore";
const MenuLabelStyle = {
  fontFamily: "Roboto",
  fontSize: "12px",
  fontWeight: "400",
  lineHeight: "18px",
  color: "#E1E1E1",
};
const MenuContentStyle = {
  fontFamily: "Roboto",
  fontSize: "16px",
  fontWeight: "500",
  lineHeight: "24px",
  color: "#F3E9D5",
};
const StyledTag = styled(Tag)`
  font-family: Roboto;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  border-radius: 96px;
  padding: 3px 12px;
`;

const StyledPendingTag = styled(StyledTag)`
  color: #214680;
  background-color: #dcebf5;
`;
const StyledDeclinedTag = styled(StyledTag)`
  color: #c02020;
  background-color: #f9ebeb;
`;
const StyledApprovedTag = styled(StyledTag)`
  color: #26a461;
  background-color: #e4f6ea;
`;
const StyledExpiredTag = styled(StyledTag)`
  color: #696767;
  background-color: #e1e1e1;
`;
const MyProfileHome = () => {
  // 定义枚举
  enum AprrovedStatus {
    //Pending Declined Approved
    PENDING = "Pending",
    DECLINED = "Declined",
    APPROVED = "Approved",
    EXPIRED = "Expired",
  }

  const statusNameMap = {
    [AprrovedStatus.PENDING]: "PENDING",
    [AprrovedStatus.DECLINED]: "DECLINED",
    [AprrovedStatus.APPROVED]: "APPROVED",
    [AprrovedStatus.EXPIRED]: "EXPIRED",
  };

  function getEnumValueFromString(
    statusStr: string
  ): AprrovedStatus | undefined {
    for (const status in AprrovedStatus) {
      if ((status as keyof typeof AprrovedStatus) === statusStr) {
        return AprrovedStatus[status as keyof typeof AprrovedStatus];
      }
    }
    return undefined;
  }

  // const [identityData, setIdentityData] = useState<IdentityDataRes>();
  // //const [lpnData, setlpnData] = useState<LpnDataRes>();
  // const [bookingData, setBookingData] = useState<BookingDataRes[]>([]);
  // 模拟接口的用户审批状态
  // const idAprrovedStatus = "DECLINED, PENDING,'', EXPIRED , APPROVED";
  // const [idAprrovedStatus, setIdAprrovedStatus] = useState();
  // 模拟接口的lpn审批状态
  // const lpnAprrovedStatus = "DECLINED, APPROVED";
  //const [lpnAprrovedStatus, setLpnAprrovedStatus] = useState();
  // 模拟接口的Booking Payment状态
  // const bookingPayStatus = "noPay";
  //const [bookingPayStatus] = useState("noPay");

  const { lpnData, identityData, bookingData } = userStore();
  console.log(identityData, "identityData");
  const idAprrovedStatus = identityData?.approvalStatus;

  console.log(idAprrovedStatus, "identApprovalStatus");
  const lpnHasDeclined = lpnData.some(
    (item) => item.approvalStatus === statusNameMap[AprrovedStatus.DECLINED]
  );

  const isbookingNoPayAlert = bookingData.some(
    //Monthly
    (item) => item.passType === "Monthly" && item.pymStatus === "Pending"
  );
  console.log(
    lpnData,
    "lpnData",
    identityData,
    "---identityData",
    bookingData,
    "_____bookingData"
  );

  // useEffect(() => {
  //   getUserInfo({
  //     userId: "e6c81a0f-f015-4c33-9f5e-4c9bfcd6bdff",
  //   })
  //     .then((data) => {
  //       console.log(
  //         "Form values : data",
  //         //@ts-ignore
  //         data.data
  //       );
  //       console.log(data, "getUserInfo");
  //       //@ts-ignore
  //       if (data.code === 200) {
  //         //@ts-ignore
  //         // setIdentityData(data.data.identityData);
  //         // //@ts-ignore
  //         // // setlpnData(data.data.lpnData);
  //         // //@ts-ignore
  //         // setBookingData(data.data.bookingData);
  //         // //@ts-ignore
  //         // setIdAprrovedStatus(data.data.identityData.approvalStatus);
  //         // //setIdAprrovedStatus("APPROVED"); // "" PENDING DECLINED EXPIRED APPROVED

  //         // //@ts-ignore
  //         // setLpnAprrovedStatus(data.data.lpnData.approvalStatus);
  //         // //setLpnAprrovedStatus("DECLINED");
  //         //setBookingPayStatus(bookingData.approvalStatus);
  //         console.log("Form values : 1", data.data);
  //       }

  //       // (data.data.content);
  //     })
  //     .catch((error) => {
  //       console.error(error, "error");
  //     });
  // }, []);

  const [isModalOpenIdDeclined, setIsModalOpenIdDeclined] = useState(false);
  const [isModalOpenIdPending, setIsModalOpenIdPending] = useState(false);
  const [isModalOpenIdUnstart, setIsModalOpenIdUnstart] = useState(false);

  const handleClickMyBooking = () => {
    if (idAprrovedStatus === statusNameMap[AprrovedStatus.DECLINED]) {
      setIsModalOpenIdDeclined(true);
    } else if (idAprrovedStatus === statusNameMap[AprrovedStatus.PENDING]) {
      setIsModalOpenIdPending(true);
    } else if (idAprrovedStatus === statusNameMap[AprrovedStatus.EXPIRED]) {
      //to do : skip url here
    } else if (idAprrovedStatus === statusNameMap[AprrovedStatus.APPROVED]) {
      history.push("/mybooking-records");
    } else if (
      idAprrovedStatus === "" ||
      idAprrovedStatus === null ||
      idAprrovedStatus === undefined
    ) {
      setIsModalOpenIdUnstart(true);
    }
  };

  const handleClickMyLicense = () => {
    if (idAprrovedStatus === statusNameMap[AprrovedStatus.DECLINED]) {
      setIsModalOpenIdDeclined(true);
    } else if (idAprrovedStatus === statusNameMap[AprrovedStatus.PENDING]) {
      setIsModalOpenIdPending(true);
    } else if (idAprrovedStatus === statusNameMap[AprrovedStatus.EXPIRED]) {
      //to do : skip url here
    } else if (
      idAprrovedStatus === "" ||
      idAprrovedStatus === null ||
      idAprrovedStatus === undefined
    ) {
      setIsModalOpenIdUnstart(true);
    }
  };

  // useEffect(() => {
  //   if (!(window as any).clickHandlerObj) {
  //     (window as any).clickHandlerObj = {
  //       handleClick: handleClickMyProfile,
  //     };
  //   }
  // }, []);

  // Account Identity Verification Declined Modal
  const handleOk = () => {
    if (idAprrovedStatus === statusNameMap[AprrovedStatus.DECLINED]) {
      setIsModalOpenIdDeclined(false);
      // todo:  skip url here
    } else if (idAprrovedStatus === statusNameMap[AprrovedStatus.PENDING]) {
      setIsModalOpenIdPending(false);
      // todo:  skip url here
    } else if (
      idAprrovedStatus === "" ||
      idAprrovedStatus === null ||
      idAprrovedStatus === undefined
    ) {
      setIsModalOpenIdUnstart(false);
      // todo:  skip url here
      history.push("/login");
    }
  };

  const handleCancel = () => {
    if (idAprrovedStatus === statusNameMap[AprrovedStatus.DECLINED]) {
      setIsModalOpenIdDeclined(false);
      // todo:  skip url here
    } else if (idAprrovedStatus === statusNameMap[AprrovedStatus.PENDING]) {
      setIsModalOpenIdPending(false);
      // todo:  skip url here
    } else if (
      idAprrovedStatus === "" ||
      idAprrovedStatus === null ||
      idAprrovedStatus === undefined
    ) {
      setIsModalOpenIdUnstart(false);
      // todo:  skip url here
    }
  };
  const idDeclinedContent = `[ Decline Reason by Admin ]. Please update your account's identity verification.
<br/>Click <a href="/identity" onClick="window.clickHandlerObj.handleClickMyProfile(event)">here</a> to complete the verification process.`;
  const idPendingContent = `Your registration has been successfully submitted. Our admin will review and approve your record shortly. Thank you for your patience.`;
  const idUnstartContent = `Please begin the account identity verification process. Please click <a href="/login" onClick="window.clickHandlerObj.handleClickMyProfile(event)">here</a> to complete the verification.`;
  const idExpiredContent = `Please update your identity verification. Please click <a href="/identity" onClick="window.clickHandlerObj.handleClickMyProfile(event)">here</a> to complete the verification.`;
  const lpnDeclinedContent = `[ Declined Reason ]. Please update your License Plate Number as it fail to verify your identity. 
Click <a href="#" onClick="window.clickHandlerObj.handleClickMyProfile(event)">here</a> to registered License Plate Number.`;
  const bookingPayContent = `You've won the car park booking ballot! Please complete your payment to secure your spot.
Click <a href="#" onClick="window.clickHandlerObj.handleClickMyProfile(event)">here</a> to proceed payment.`;
  return (
    <div className="myprofile-home-container">
      <div className="bgImg" />
      <PaddingContent>
        <div className="user-name">Hello, Sophie!</div>
        <div className="greeting-text">Welcome Back to Our Platform.</div>
        <div className="menu-card">
          <Card
            style={{ width: 300 }}
            onClick={() => history.push("/myprofile/info")}
          >
            <div className="my-Profile-status">
              <span className="my-Profile"> My Profile</span>
              <>
                {idAprrovedStatus === statusNameMap[AprrovedStatus.PENDING] && (
                  <StyledPendingTag bordered={false}>
                    {getEnumValueFromString(idAprrovedStatus)}
                  </StyledPendingTag>
                )}
                {idAprrovedStatus ===
                  statusNameMap[AprrovedStatus.APPROVED] && (
                  <StyledApprovedTag bordered={false}>
                    {getEnumValueFromString(idAprrovedStatus)}
                  </StyledApprovedTag>
                )}
                {idAprrovedStatus ===
                  statusNameMap[AprrovedStatus.DECLINED] && (
                  <StyledDeclinedTag bordered={false}>
                    {getEnumValueFromString(idAprrovedStatus)}
                  </StyledDeclinedTag>
                )}
                {idAprrovedStatus === statusNameMap[AprrovedStatus.EXPIRED] && (
                  <StyledExpiredTag bordered={false}>
                    {getEnumValueFromString(idAprrovedStatus)}
                  </StyledExpiredTag>
                )}
              </>
            </div>
            {/* <div className="hkiarace-id">HKIARaCE ID</div>
            <div className="hkiarace-id-val">00000001</div>
            <div className="Expiry-Date">Profile Expiry Date</div>
            <div className="Expiry-Date-val">20/9/2024</div> */}
            <Descriptions
              labelStyle={MenuLabelStyle}
              contentStyle={MenuContentStyle}
              layout="vertical"
            >
              <Descriptions.Item label="HKIARaCE ID">
                {identityData?.hkiaId}
              </Descriptions.Item>
              {idAprrovedStatus !== "" &&
                idAprrovedStatus !== null &&
                idAprrovedStatus !== undefined && (
                  <Descriptions.Item label="Profile Expiry Date">
                    {identityData?.expireDate}
                  </Descriptions.Item>
                )}
            </Descriptions>
          </Card>
          <Card className="card-item" onClick={handleClickMyBooking}>
            <div className="card-text">
              My Booking
              <br />
              Records
            </div>
            <div className="myrecord-img" />
          </Card>
          <Card className="card-item" onClick={handleClickMyLicense}>
            <div className="card-text">
              My License <br />
              Plate Number
            </div>
            <div className="lpn-img" />
          </Card>
        </div>
        {/* <Alert
          className="alert-content"
          // onClick={() => {
          //   history.push("/identity");
          // }}
          message="Account Identity Verification has been Declined"
          type="error"
          showIcon={true}
          icon={<img src={AlertFill} alt="SVG Image" />}
          description={
            <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
          }
        /> */}
        <Space direction="vertical" size="middle" style={{ display: "flex" }}>
          {/* identityAlert */}
          {idAprrovedStatus === statusNameMap[AprrovedStatus.DECLINED] && (
            <CustomAlert
              message="Account Identity Verification has been Declined"
              type="error"
              showIcon={true}
              icon={AlertFill}
              description={idDeclinedContent}
            />
          )}
          {idAprrovedStatus === statusNameMap[AprrovedStatus.PENDING] && (
            <CustomAlert
              message="Submit Successfully & Pending to Review"
              type="info"
              showIcon={true}
              icon={Info}
              description={idPendingContent}
            />
          )}
          {idAprrovedStatus === statusNameMap[AprrovedStatus.EXPIRED] && (
            <CustomAlert
              message="Your Identity Verification has been expired"
              type="error"
              showIcon={true}
              icon={AlertFill}
              description={idExpiredContent}
            />
          )}
          {idAprrovedStatus === "" ||
            idAprrovedStatus === null ||
            (idAprrovedStatus === undefined && (
              <CustomAlert
                message="The Account Identity Verification Process has not been started yet"
                type="warning"
                showIcon={true}
                icon={AlertCircle}
                description={idUnstartContent}
              />
            ))}

          {/* lpnAlert */}
          {lpnHasDeclined === true && (
            <CustomAlert
              message="Register License Plate Number has been Declined"
              type="error"
              showIcon={true}
              icon={AlertFill}
              description={lpnDeclinedContent}
            />
          )}

          {/* bookingPaymentAlert */}
          {isbookingNoPayAlert === true && (
            <CustomAlert
              message="Payment Required"
              type="warning"
              showIcon={true}
              icon={AlertCircle}
              description={bookingPayContent}
            />
          )}
        </Space>
        <BookingRecord bookingDataRes={bookingData} />
      </PaddingContent>

      <CustomModal
        width="40%"
        icon={AlertFill}
        title="Account Identity Verification Declined"
        content="Your account identity verification was declined. You are not permitted to make any booking."
        onOk={handleOk}
        onCancel={handleCancel}
        isModalOpen={isModalOpenIdDeclined}
        btnLeftText="Cancel"
        btnRightText="Update Now"
      />
      <CustomModal
        width="40%"
        icon={AlertFill}
        title="Account Identity Verification Pending"
        content="Our admin will review and approve your record shortly. Unfortunately, you are not permitted to make any booking."
        onOk={handleOk}
        onCancel={handleCancel}
        isModalOpen={isModalOpenIdPending}
        btnLeftText="Cancel"
        btnRightText="Back"
        displayCancelBtnFooter="none"
      />
      <CustomModal
        width="40%"
        icon={AlertFill}
        title="Account Identity Verification not Completed"
        content="You are not permitted to make any booking. </br>
Please verify your account’s identity as soon as possible."
        onOk={handleOk}
        onCancel={handleCancel}
        isModalOpen={isModalOpenIdUnstart}
        btnLeftText="Cancel"
        btnRightText="Verify Now"
      />
    </div>
  );
};

export default MyProfileHome;
